import React, { useEffect, useRef, memo } from 'react';
import { Modal } from 'antd';
import styles from './index.less';
import useModel from '../../useModel.js';
import CodeMirror from '../../../MessageTemplate/components/xmlEdit/codeMirror.jsx';

const ErrorMessage = memo(() => {
  const { state, setState } = useModel(model => [
    model.state.messageDetailVisible,
    model.state.messageDetailItem,
  ]);
  const { messageDetailItem: item, messageDetailVisible } = state;

  const handleOk = async e => {
    setState({
      messageDetailVisible: false,
    });
  };

  const handleCancel = e => {
    setState({
      messageDetailVisible: false,
    });
  };

  const errorDes = item?.description || {};
  const ref = useRef();

  return (
    <Modal
      className={styles['modal-wrap']}
      title={<span>报文结果</span>}
      width={800}
      footer={null}
      visible={messageDetailVisible}
      destroyOnClose={true}
      onCancel={handleCancel}
    >
      <div className={styles['editor']}>
        <CodeMirror
          forwordRef={ref}
          code={(errorDes?.xml && errorDes?.xml) || ''}
          readOnly={true}
          lineWidget={(errorDes?.details || []).map(item => {
            return {
              line: item.number,
              message: item.msg,
            };
          })}
        />
      </div>
    </Modal>
  );
});

export default ErrorMessage;
